<template>
	<view class="setNmae">
		<view class="inp_box my-pdlr-15">
			<input type="text" @blur="characters" v-model="name" maxlength="18" class="inp" />
			<view class="txt">昵称不能超过18个字符，不支持特殊符号</view>
			<view class="complete">
				<button class="btn" @click="complete">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {updateNicknameApi} from "@/api/myinter.js"
	export default {
		data() {
			return {
				name:'',
			};
		},
		methods:{
			characters(){
				var pattern = new RegExp("[`~!@#$^%&*()=|{}':;,\\[\\].<>/?~！～￥……&*（）×+;—|{}【】‘；：”“《》。，、？]")
				  if (pattern.test(this.name)){
					  uni.showToast({
					  	title:"里面包含特殊符号,请重新输入",
						icon:"none"
					  })
					  this.name = ''
					  
				  }
				  console.log(this.name,9999);
			},
			async complete(){
				uni.showLoading({
					title:"正在加载中...."
				})
				let params = {
					nickname:this.name
				}
				console.log(this.name);
				const res = await updateNicknameApi(params)
				if(res.statusCode===200){
					uni.hideLoading()
					uni.showToast({
						title:"修改成功",
						icon:"success",
						duration:50000,
						success() {
							uni.reLaunch({
								url:"/pages/my/my"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setNmae{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		.inp_box{
			width: 100%;
			height: 400rpx;
			.inp{
				width: 100%;
				height: 100rpx;
				border-bottom:1rpx solid #F5F5F5;
			}
			.txt{
				width: 100%;
				line-height: 80rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #F05329;
			}
			.complete{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: flex-end;
				.btn{
					width: 690rpx;
					line-height: 88rpx;
					margin: 0 auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
